import React, { useEffect, useState, Fragment } from 'react'
import { Button, message, Table, Tag, Popconfirm, Checkbox } from 'antd'
import { getUserList, updateUser } from '../../../request/setting'
import EditUser from './EditUser'

function User() {
  const [userList, setUserList] = useState([])
  const [isLoading, setIsLoading] = useState(false)
  const [totalCount, setTotalCount] = useState(0)
  const [currentPage, setCurrentPage] = useState(0)
  const [isShowEdit, setIsShowEdit] = useState(false)
  const [editUser, setEditUser] = useState({})
  const pageSize = 30

  useEffect(() => {
    getData().catch(e => console.log(e.message))
  }, [])

  const getData = async(page = 1) => {
    setIsLoading(true)
    const { code, message: errMsg, data } = await getUserList({ page, size: pageSize })
    setIsLoading(false)
    if (code) {
      return message.error(errMsg)
    }
    setTotalCount(data.total_result)
    setCurrentPage(page)
    setUserList(data.list)
  }

  const editUserStatus = async(id, status) => {
    const { code, message: errMsg } = await updateUser({ id, status })
    if (code) {
      return message.error(errMsg)
    }
    message.success('修改成功')
    await getData(currentPage)
  }

  const columns = [
    {
      title: 'id',
      dataIndex: 'id'
    },
    {
      title: '姓名',
      dataIndex: 'actual_name'
    },
    {
      title: '账号',
      dataIndex: 'name'
    },
    {
      title: '邮箱',
      dataIndex: 'email'
    },
    {
      title: '手机号',
      dataIndex: 'mobile'
    },
    {
      title: '角色',
      dataIndex: 'role_name'
    },
    {
      title: '部门',
      dataIndex: 'department'
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: text => (text === 1 ? <Tag color="green">可用</Tag> : <Tag color="volcano">禁用</Tag>)
    },
    {
      title: '编辑',
      render: (text, record) => (
        <Fragment>
          <Button
            size="small"
            onClick={() => {
              setEditUser(record)
              setIsShowEdit(true)
            }}
          >
            编辑
          </Button>
          {record.status === 1 && (
            <Popconfirm
              title="确定禁用该用户吗?"
              onConfirm={() => editUserStatus(record.id, 0)}
              okText="是"
              cancelText="否"
            >
              <Button size="small" type="danger" style={{ marginLeft: '15px' }}>禁用</Button>
            </Popconfirm>
          )}
          {record.status === 0 && (
            <Popconfirm
              title="确定启用该用户吗?"
              onConfirm={() => editUserStatus(record.id, 1)}
              okText="是"
              cancelText="否"
            >
              <Button size="small" type="primary" style={{ marginLeft: '15px' }}>启用</Button>
            </Popconfirm>
          )}
        </Fragment>
      )
    }
  ]

  return (
    <div className="user-list">
      <div className="menu">
        <Button
          type="primary"
          onClick={() => {
            setEditUser({})
            setIsShowEdit(true)
          }}
        >
          添加用户
        </Button>
      </div>
      <Table
        rowKey={row => row.id}
        loading={isLoading}
        columns={columns}
        dataSource={userList}
        onChange={page => getData(page.current)}
        pagination={{
          defaultCurrent: 1,
          current: currentPage,
          total: totalCount,
          pageSize,
          showTotal: total => `共 ${total} 条`
        }}
      />
      {isShowEdit && (
        <EditUser
          visible={isShowEdit}
          close={() => {
            setIsShowEdit(false)
            getData()
          }}
          user={editUser}
        />
      )}
    </div>
  )
}

export default User
